import React, { useState } from 'react';
import { Input, Button, message } from 'antd';
import Publish from '../publish';
import services from 'src/services/api';
const { TextArea } = Input;

const Release = (props) => {
  const { record } = props;
  const [remark, setRemark] = useState('');
  const api = 'strategyFlow';
  const ui = {
    fontSize: '14px',
    margin: '0 0 24px 0',
    display: 'flex',
  };
  const title = {
    width: '100px',
    textAlign: 'right',
    display: 'inline-block',
    fontWeight: 700,
  };
  const publishSum = () => {
    services[api]
      .publish({
        packageVersion: record.version,
        strategyId: record.id,
        remark: remark,
      })
      .then((data) => {
        if (data.code === '0') {
          message.success(data.msg);
          this.props.deleteCb(record);
          this.props.queryList();
        } else {
          message.error(data.msg);
        }
      });
  };
  return (
    <div style={{ padding: '24px' }}>
      <div style={ui}>
        <span style={title}>项目名称：</span>
        {record.projectName}
      </div>
      <div style={ui}>
        <span style={title}>策略名称：</span>
        {record.name}
      </div>
      <div style={ui}>
        <span style={title}>策略版本：</span>
        {record.version}
      </div>
      <div style={ui}>
        <span style={title}>策略包名称：</span>
        {record.name}
      </div>
      <div style={ui}>
        <span style={title}>策略包版本：</span>
        {record.version}
      </div>
      <div style={ui}>
        <span style={{ ...title, width: '122px' }}>发布说明：</span>
        <TextArea
          value={remark}
          width='200px'
          onChange={(e) => {
            e.persist();
            setRemark(e.target.value);
          }}
          placeholder='请输入'
          rows={4}
        />
      </div>
      <div style={{ textAlign: 'right' }}>
        <Button type='primary' onClick={publishSum}>
          确定
        </Button>
      </div>
    </div>
  );
};
export default Release;
